<template>
  <div class="body_content content_bg">
    <el-card class="box-card">
      <span class="pro_name">
        <i class="pro_sign"></i>交接班工作单
        <el-button type="warning" style="width: 80px;float: right" v-if="!submitForm.id" @click="submitDoc">提交</el-button>
      </span>
      <el-form :model="submitForm" :rules="rules" ref="submitForm" label-width="80px" class="demo-ruleForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="时间" prop="date">
              <el-time-picker placeholder="选择时间" :disabled="!!submitForm.id" v-model="submitForm.date" style="width: 100%;"></el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="内容标题" prop="name">
              <el-input v-model.trim="submitForm.name" placeholder="内容标题" :disabled="!!submitForm.id"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="值班人员" prop="duty">
              <el-select v-model="submitForm.duty" placeholder="请选择值班人员" :disabled="!!submitForm.id" style="width: 100%;">
                <el-option :label="p.name" v-for="p in personsList" :value="p.userId" :key="p.userId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="项目" prop="type">
              {{projectName}}
            </el-form-item>
          </el-col>
          <el-col :span="24" v-for="p in submitForm.content" :key="p.type">
            <el-form-item :label="p.type===3?'施工计划':p.type===4?'存在问题':'移交事项'">
              <div style="position: relative">
                <div style="position: absolute;top: 0;left: 0;width: calc(100% - 15px);height: 230px;background: transparent;z-index: 1000;" v-if="submitForm.id||p.type===3"></div>
                <Editor :ref="'ue'+p.type" :defaultMsg="p.htmlText" :index="'editor'+p.type" :isOnly="p.type===3" :config="config" />
                <div class="file-upload" @click="upload(p.type)"></div>
                <input :id="'up'+p.type" type="file" style="display: none" @change="fileFull(p.type)" />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="接班人员" prop="succeed">
              <el-select v-model="submitForm.succeed" placeholder="请选择接班人员" :disabled="!!submitForm.id" style="width: 100%;">
                <el-option :label="p.name" v-for="p in personsList" :value="p.userId" :key="p.userId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>
<script>
  import Editor from "../../components/editor/ue.vue";
  import "../../../static/UE/themes/default/images/icons.png";
  import {
    imgUrl
  } from "../../lib/config/config";
  import {
    baseConfig,
    construction
  } from "../../service/service_zbw";
  export default {
    props: {
      todatFlowId: {
        type: Number
      },
      flowId: {
        type: Number
      },
      todatFlowPlan: {
        type: String
      },
      personsList: {
        type: Array
      },
      projectName: {
        type: String
      }
    },
    components: {
      Editor
    },
    data() {
      return {
        //施工风险
        submitForm: {
          id: null,
          //日期
          date: '',
          //内容标题
          name: '',
          //值班人员
          duty: '',
          //状态
          type: [],
          //富文本编辑器
          //type: 3-施工计划 4-存在问题 5-交接事项
          content: [{
            text: '',
            htmlText: '',
            type: 3,
          }, {
            text: '',
            htmlText: '',
            type: 4,
          }, {
            text: '',
            htmlText: '',
            type: 5,
          }],
          succeed: ''
        },
        rules: {

        },
        config: {
          elementPathEnabled: false,
          autoHeightEnabled: false,
          initialFrameWidth: null,
          initialFrameHeight: 200,
          toolbars: [
            [
              'insertimage', //多图上传
              'insertorderedlist', //有序列表
              //'fullscreen', //全屏
            ]
          ]
        },
      }
    },
    methods: {
      /**
       * 提交交接单
       */
      async submitDoc() {
        this.getContent();
        let param = {
          constructionContent: this.submitForm.name,
          date: this.submitForm.date,
          duty: this.submitForm.duty,
          flowId: this.todatFlowId,
          id: this.submitForm.id,
          riskEvent: this.submitForm.content[1].htmlText,
          succeed: this.submitForm.succeed,
          succeedEvent: this.submitForm.content[2].htmlText
        }
        let res = await construction.submitDoc(param);
        if (res.success) {
          this.$emit('submitFinish');
          this.$message({
            type: 'success',
            message: res.msg
          })
        } else {
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      },
      /**
       * 获取富文本编辑器内容
       */
      async getSubmitInfo() {
        let res = await construction.getSubmitInfo(this.flowId);
        if (res.success) {
          this.submitForm = {
            id: res.obj.infoBase.id,
            //日期
            date: res.obj.infoBase.date,
            //内容标题
            name: res.obj.infoBase.constructionContent,
            //值班人员
            duty: res.obj.infoBase.duty,
            //状态
            type: [],
            //富文本编辑器
            //type: 3-施工计划 4-存在问题 5-交接事项
            content: [{
              text: '',
              htmlText: res.obj.planContentToday,
              type: 3,
            }, {
              text: '',
              htmlText: res.obj.infoBase.riskEvent,
              type: 4,
            }, {
              text: '',
              htmlText: res.obj.infoBase.succeedEvent,
              type: 5,
            }],
            succeed: ''
          };
        } else {
          this.submitForm = {
            id: null,
            //日期
            date: '',
            //内容标题
            name: '',
            //值班人员
            duty: '',
            //状态
            type: [],
            //富文本编辑器
            //type: 3-施工计划 4-存在问题 5-交接事项
            content: [{
              text: '',
              htmlText: '',
              type: 3,
            }, {
              text: '',
              htmlText: '',
              type: 4,
            }, {
              text: '',
              htmlText: '',
              type: 5,
            }],
            succeed: ''
          };
          this.$message({
            type: 'error',
            message: res.msg
          })
        }
      },
      /**
       * 获取富文本编辑器内容
       */
      getContent() {
        for (let i = 0; i < this.submitForm.content.length; i++) {
          let plan = {};
          let fileContent = this.$refs[`ue${i+3}`][0].getUEContent();
          let fileContentTxt = this.$refs[`ue${i+3}`][0].getUEContentTxt();
          plan = {
            text: fileContentTxt,
            htmlText: fileContent,
            type: this.submitForm.content[i].type
          };
          this.submitForm.content.splice(i, 1, plan);
        }
      },
      /**
       *
       */
      removeEquipment(index) {
        this.planForm.equipment.splice(index, 1);
      },
      upload(val) {
        let id = `up${val}`;
        document.getElementById(id).click();
        //
      },
      async fileFull(val) {
        let id = `up${val}`;
        let files = document.getElementById(id).files;
        if (document.getElementById(id).value !== '') {
          let res = await baseConfig.upLoad(files[0]);
          if (res.result) {
            let html = `<img src="${imgUrl}/${res.obj}"><br/>`;
            let con = this.$refs[`ue${val}`][0].getUEContent();
            for (let i of this.submitForm.content) {
              if (i.type === val) {
                i.htmlText = `${con}${html}`;
                break;
              }
            }
          } else {
            this.$message({
              type: 'error',
              message: res.msg
            })
          }
        }
        document.getElementById(id).value = '';
      },
      /**
       * 打开模态框
       */
      openModal() {
        this.isOpen = true;
      },
      /**
       * 关闭模态框
       */
      closeModal(val) {
        this.isOpen = val.modal;
        if (val.status) {
          this.planForm.equipment = val.value;
        }
      }
    },
    watch: {
      flowId(newval) {
        if (newval) {
          this.getSubmitInfo();
        } else {
          this.submitForm = {
            date: '',
            name: '',
            duty: '',
            type: [],
            content: [{
              text: '',
              htmlText: this.todatFlowPlan || '',
              type: 3,
            }, {
              text: '',
              htmlText: '<p></p>',
              type: 4,
            }, {
              text: '',
              htmlText: '<p></p>',
              type: 5,
            }],
            succeed: ''
          }
        }
      }
    }
  }

</script>

<style scoped>
  .body_content {
    height: 100%;
  }

  .box-card {
    width: 100%;
    overflow-y: auto;
  }

  .pro_name {
    margin: 0 20px;
    margin-bottom: 24px;
    padding-top: 20px;
    font-size: 14px;
    color: #333;
    display: block;
  }

  .file-upload {
    width: 25px;
    height: 42px;
    position: absolute;
    background: transparent;
    left: 5px;
    top: 5px;
    z-index: 999
  }

</style>

